<template>
  <div class="content">
    <Resize>
      <template v-slot:left>
        <div class="content_l">
          <div class="left-btn">
            <vxe-toolbar v-if="false">
              <template #buttons>
                <vxe-button
                  v-if="false"
                  @click="$refs.xTree.setAllTreeExpand(true)"
                  >全部展开</vxe-button
                >
                <vxe-button @click="$refs.xTree.clearTreeExpand()"
                  >全部关闭</vxe-button
                >
                <vxe-button @click="getSiteList" v-if="siteRow"
                  >返回站点</vxe-button
                >
                <!-- <vxe-button @click="getSiteList">返回站点</vxe-button> -->
              </template>
            </vxe-toolbar>
            <vxe-toolbar>
              <template #buttons>
                <vxe-radio-button
                  v-model="value7"
                  :label="true"
                  v-if="false"
                  :content="value7 ? '全部关闭' : '全部展开'"
                  :strict="false"
                  size="mini"
                  :disabled="!siteRow"
                ></vxe-radio-button>
                <vxe-button size="mini" @click="getSiteList" v-show="siteRow"
                  >返回站点</vxe-button
                >
                <!-- <vxe-button @click="getSiteList">返回站点</vxe-button> -->
              </template>
            </vxe-toolbar>
          </div>
          <vxe-table
            highlight-current-row
            highlight-hover-row
            :show-header="false"
            row-key
            show-overflow
            ref="xTree"
            border="inner"
            :data="siteList"
            :tree-config="{
              children: 'children',
              transform: false,
              parentKey: 'parentId',
              line: true,
              iconOpen: 'el-icon-remove',
              iconClose: 'el-icon-circle-plus',
            }"
            class="left-table"
            @cell-click="clickListRow"
          >
            <vxe-column tree-node field="name" show-overflow>
              <template #default="{ row }">
                <span>
                  <i
                    class="tree-node-icon fa"
                    :class="
                      $refs.xTree.isTreeExpandByRow(row)
                        ? 'el-icon-folder-opened'
                        : 'el-icon-folder'
                    "
                  ></i>
                  <span style="cursor: pointer; fontsize: 12px; color: #000">
                    {{ row.name }}</span
                  >
                </span>
              </template>
            </vxe-column>
          </vxe-table>
        </div>
      </template>
      <template v-slot:right>
        <div class="content_r">
          <el-table
            :data="hisTemplateList"
            style="width: 100%"
            v-if="columnRow"
            stripe
            v-loading="loading"
          >
            <el-table-column type="index" width="50"> </el-table-column>
            <el-table-column
              prop="createddate"
              align="center"
              label="创建时间"
              show-overflow-toolti
            >
            </el-table-column>
            <el-table-column
              prop="memo"
              align="center"
              label="备注"
              width="400"
            >
            </el-table-column>
            <el-table-column
              label="操作"
              align="center"
              class-name="small-padding fixed-width"
            >
              <template slot-scope="scope" v-if="scope.row.userId !== 1">
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-edit"
                  @click="handleEdit(scope.row)"
                  v-hasPermi="['system:template:edit']"
                  >编辑</el-button
                >
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-monitor"
                  @click="handleUse(scope.row)"
                  v-hasPermi="['system:template:edit']"
                  >应用</el-button
                >
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-delete"
                  @click="handleDel(scope.row)"
                  v-hasPermi="['system:template:delete']"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <span v-else>
            “ 历史模板管理 ”是
            WYCMS系统的用于实现版本控制的主要功能模块。它记录各个网站、栏目的曾经使用过的模板信息。左侧菜单显示该平台下所支持的网站及栏目的历史模板信息，超级管理员将能看到全部网站及栏目的
            历史 模板，其它用户随着角色不同将看到属于自己权限的内容。
            这里是网站历史模板库。
            系统保留最近360天内的模板记录，超出时间的模板系统将自动清除！
          </span>
        </div>
      </template>
    </Resize>
  </div>
</template>

<script>
import {
  listHistoryTemplate,
  delHistoryTemplate,
  listHistoryemplateFile,
} from "@/api/template/index";
import { listSite } from "@/api/content/net";
import { getChannelListForTree, publicChannel } from "@/api/content/clounm";
export default {
  name: "HistoryTemplate",
  data() {
    return {
      loading: false,
      //全部展开 全部关闭
      value7: false,
      //左侧站点列表
      siteList: [],
      //历史模板列表
      hisTemplateList: [],
      //点击左侧列表，判断是获取站点还是栏目   删除之后使用
      obj: {},
      siteRow: {
        siteId: null,
      },
      columnRow: { channelId: null },
    };
  },

  components: {},

  computed: {
    currentRowId() {
      return this.columnRow?.channelId || this.siteRow?.siteId;
    },
  },

  mounted() {
    this.getSiteList();
  },

  watch: {
    value: {
      handler(val) {},
      deep: true,
      immediate: true,
    },
    value7(value) {
      if (value) {
        this.$refs.xTree.setAllTreeExpand(true);
      } else {
        this.$refs.xTree.clearTreeExpand();
        //展开第一个节点
        this.$nextTick(() => {
          this.$refs.xTree.setTreeExpand(this.siteList[0], true);
        });
      }
    },
  },

  methods: {
    //获取站点列表
    getSiteList() {
      this.value7 = false;
      this.siteRow = undefined;
      this.columnRow = undefined;
      // this.hisTemplateList = [];
      listSite()
        .then((res) => {
          this.siteList = [
            { name: "模板库-站点列表", root: "000", children: res.data },
          ];
        })
        .then(() => {
          //展开第一个节点
          this.$nextTick(() => {
            this.$refs.xTree.setTreeExpand(this.siteList[0], true);
          });
        });
    },
    //获取模板列表
    clickListRow({ row, triggerTreeNode }) {
      // 点击的是展开 收缩
      if (triggerTreeNode) return;
      this.$refs.xTree.setCurrentRow(row);
      let obj = {};
      if (row.siteId && row.channelId) {
        //点击栏目行   获取 栏目中的 历史模板 列表
        obj = {
          type: "channel",
          id: row.channelId,
        };
        this.haldleClickFile(obj);
        this.columnRow = row;
        sessionStorage.setItem("setColumnRow", JSON.stringify(row));
      } else if (row.root == "000") {
        // 点击主站行

        this.netRow = row;
        this.siteRow = undefined;
        this.columnRow = undefined;

        sessionStorage.setItem("setNetRow", JSON.stringify(row));
        sessionStorage.setItem("setSiteRow", null);
        sessionStorage.setItem("setColumnRow", null);
        return;
      } else if (row.siteId && row.root == "111") {
        //点击 栏目列的  站点行    获取站点下的历史模板列表
        obj = {
          type: "website",
          id: row.siteId,
        };
        this.siteRow = row;
        this.columnRow = undefined;

        sessionStorage.setItem("setSiteRow", JSON.stringify(row));
        sessionStorage.setItem("setColumnRow", null);

        this.haldleClickFile(obj);
      } else {
        //点击站点行    获取栏目列表
        obj = {
          siteId: row.siteId,
        };
        this.siteRow = row;
        this.columnRow = undefined;

        sessionStorage.setItem("setSiteRow", JSON.stringify(row));
        sessionStorage.setItem("setColumnRow", null);

        this.haldleClickSite(obj);
      }
      this.obj = obj;
    },
    //点击文件夹
    haldleClickFile(obj) {
      this.loading = true;
      listHistoryTemplate(obj).then((res) => {
        this.hisTemplateList = res.data;
        this.loading = false;
      });
    },
    //点击站点行  获取栏目列表
    haldleClickSite() {
      getChannelListForTree({ siteId: this.siteRow.siteId })
        .then((res) => {
          this.siteRow.children = this.handleTree(res.data, "channelId").filter(
            (item) => item.parentId == this.siteRow.siteId
          );
          this.siteRow.root = "111";
          this.siteList = [this.siteRow];
        })
        .then(() => {
          //展开第一个节点
          this.$nextTick(() => {
            this.$refs.xTree.setTreeExpand(this.siteList[0], true);
          });
        });
    },

    //模板编辑
    handleEdit(row) {
      let { href } = this.$router.resolve({
        path: "/template/edit",
        query: {
          siteId: row.functionId,
          id: row.id,
          type: "history",
        },
      });
      window.open(href, "_blank");
    },
    //模板应用
    handleUse(row) {
      this.$confirm("您确定要应用此模板吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          alert("没有接口");
        })
        .catch(() => {});
    },
    //模板删除
    handleDel(row) {
      this.$confirm("您确定要删除此模板?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          delHistoryTemplate(row.id)
            .then((res) => {
              this.msgSuccess("删除成功");
            })
            .then(() => {
              this.haldleClickFile(this.obj);
            });
        })
        .catch(() => {});
    },
  },
};
</script>

<style scoped lang="scss">
@import "~@/assets/styles/variables.scss";
.content {
  width: 100%;
  // height: calc(100vh - 100px);
  // height: calc(100vh - #{$footHeight} - 0px - 50px - 20px);
  display: flex;
  flex-direction: row;
  // padding: 10px;
  position: relative;
  border: 1px solid #ccc;
  .content_l {
    overflow: auto;
    width: 100%;
    height: 100%;
    background: #f4f4f4 !important;
    display: flex;
    flex-direction: column;
    .left-table {
      flex: 1;
      height: 0;
      overflow: auto;
    }
  }
  .content_r {
    overflow: auto;
    // padding: 10px;
    height: 100%;
    border-left: 1px solid #ccc;
    width: 100%;
    flex: 1;
  }
}
</style>
